<template>
    <h3 class="text-base font-bold">
        <span>文本描述</span>
        <span class="text-error">*</span>
    </h3>

    <!--    输入框    -->
    <div class="mt-[10px] flex">
        <l-textarea
            v-model="value"
            maxlength="1024"
            :rows="6"
            :clearable="true"
            :show-word-limit="false"
            :contentStyle="{
                height: '96px',
                background:'#000'
            }"
            :customStyle="{
                paddingBottom: '24px'
            }"
            placeholder="输入英文描述词，生成效果会更好；描述词越详细，生成的图片效果更加真实哦～"
        >
            <template #length-suffix>
                <div class="length-suffix justify-end">
                    <KeywordSuggestion v-model="value">
                        <template #trigger>
                            <el-button
                                type="primary"
                                :link="true"
                                class="mb-[1px] ml-[10px]"
                            >
                                关键词推荐
                            </el-button>
                        </template>
                    </KeywordSuggestion>
                    <el-button
                        v-if="appStore?.getDrawConfig?.translate_type == 2"
                        type="default"
                        :link="true"
                        class="ml-[10px]"
                        :icon="Switch"
                        :loading="isTranslate"
                        @click="translatePrompt()"
                    >
                        翻译成英文
                    </el-button>
                    <el-button
                        type="default"
                        :link="true"
                        class="ml-[10px]"
                        :icon="Delete"
                        @click="value = ''"
                    >
                        清空
                    </el-button>
                </div>
            </template>
        </l-textarea>
    </div>
</template>

<script setup lang="ts">
import { Delete, Switch } from '@element-plus/icons-vue'
import LTextarea from '~/components/l-textarea/index.vue'
import KeywordSuggestion from './components/keyword-suggestion.vue'
import { useAppStore } from '~/stores/app'
import { useLockFn } from '~/composables/useLockFn'
import { keywordPromptTranslate } from '~/api/drawing'
import { useVModels } from '@vueuse/core'
import { backgroundClip } from 'html2canvas/dist/types/css/property-descriptors/background-clip'

const appStore = useAppStore()
const emit = defineEmits<{
    (event: 'update:modelValue', value: string): void
}>()
const props = withDefaults(
    defineProps<{
        modelValue?: any
    }>(),
    {
        modelValue: ''
    }
)
const { modelValue: value } = useVModels(props, emit)

// 请求翻译
const { isLock: isTranslate, lockFn: translatePrompt } = useLockFn(async () => {
    try {
        if (value.value.trim() == '') {
            feedback.msgError('请输入描述词')
            return
        }
        const { promptEn } = await keywordPromptTranslate({
            prompt: value.value
        })
        value.value = promptEn
    } catch (error) {
        console.log('翻译失败=>', error)
    }
})
</script>

<style scoped>
.length-suffix {
    position: absolute;
    bottom: 0;
    left: 10px;
    font-size: 14px;
    display: flex;
    align-items: center;
    width: 90%;
    height: 30px;
    background: #ffffff;
}
</style>